<!-- 公告栏 -->
<template>
  <div v-loading="loading">
    <ProTable :columns="columns" 
    :data="list" 
    row-key="affId" 
    @row-click="showAfficheDetail" 
    :tool-button="false"
    :pagination="false" 
    max-height="500"
    >
  </ProTable>
    <el-dialog v-model="Visible">
      <div class="item">
        <div class="item_label">{{$t('systemTool.affiche.title')}}</div>
        <div class="item-content">{{ title }}</div>
      </div>
      <div class="item">
        <div class="item_label">{{$t("systemTool.affiche.timeTo")}}</div>
        <div class="item-content">{{ startTime }} &nbsp;至&nbsp; {{ endTime }}</div>
      </div>
      <div class="item" style="border-bottom: 1px solid #cbcaca;">
        <div class="item_label">{{$t("systemTool.affiche.content")}}</div>
        <div class="item-content" v-html="content"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="AfficheBox">
import { ref, reactive, onMounted } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { User } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { useRouter } from "vue-router";
import { afficheList } from "@/api/modules/index";
import { useUserStore } from "@/stores/modules/user";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const userStore = useUserStore();

// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
  { type: "index", label: t("systemTool.affiche.Id"), width: 80 },
  { prop: "affTitle", label: t("systemTool.affiche.title") },
  { prop: "affCreaTime", label: t("systemTool.affiche.createTime"), width: 200 }
]);

interface ListItem {
  affId: number;
  affTitle: string;
  affCreaTime: string;
}

const router = useRouter();
const list = ref<ListItem[]>([]);
const loading = ref(false);
const Visible=ref(false);
onMounted(() => {
  loading.value = true;
  setTimeout(() => {
    afficheList({
      "afficheQueryDto.companyNo": userStore.userInfo.companyNo,
      "afficheQueryDto.queryFlag": "portal",
      sidx: "affStart",
      sord: "desc"
    }).then((res: any) => {
      loading.value = false;
      list.value = res.data || [];
    });
  }, Math.random() * 500);
});
const title=ref("");
const department=ref("");
const startTime=ref("");
const endTime=ref("");
const content=ref("")
const showAfficheDetail=(e)=>{
  console.log(e);
  Visible.value=true;
  title.value=e.affTitle;
  startTime.value=e.affStart;
  endTime.value=e.affEnd;
  content.value=e.affContents;
}
</script>

<style scoped lang="scss">
:deep(.card) {
  padding: 10px;
  border: none;
}
.item {
  display: flex;
  width: 90%;
  font-size: 14px;
  border: 1px solid #cbcaca;
  border-bottom: none;
}
.item_label {
  display: inline-block;
  width: 30%;
  padding-left: 10px;
  font-weight: bold;
  line-height: 34px;
  color: #000000;
  vertical-align: middle;
  background: #e5e5e5;
  border: 1px solid #e5e5e5;
}
.item-content {
  display: inline-block;
  width: 70%;
  padding: 0 5px;
  line-height: 34px;
  vertical-align: middle;
  > p {
    margin: 0;
  }
}
</style>
